<template>
  <view class="contain">
    <view class="head_navigation">
      <view class="head_title">
        <view class="avtar_title">
          <image
            class="avtar"
            :src="userinfoList.avatar"
            mode="aspectFill"
          ></image>
          <view class="actar_text">
            <view class="avtar_toptitle">你好!</view>
            <view class="avtar_bottitle">欢迎加入商贸大家庭</view>
          </view>
        </view>
      </view>
      <view class="main_function">
        <view class="left_join" @click="gotoCampus">
          <view class="arrow_svg">
            <view class="leftTop_arrowsvg"></view>
          </view>
          <view class="leftjon_title">校园漫游</view>
        </view>
        <view class="right_join" @click="gotoAbout">
          <view class="rightjon_title">关于学校</view>
        </view>
      </view>
    </view>
    <aiChat></aiChat>
    <tab-bar></tab-bar>
  </view>
</template>

<script setup>
  import { ref, onMounted } from "vue";
  import TabBar from "../../components/tab-bar/tab-bar.vue";
  import aiChat from "../../components/ai-chat/ai-chat.vue";
  import { getUserInfo } from "@/api/user";

  const userinfoList = ref({});

  const getUserInfoList = async () => {
    const res = await getUserInfo();
    userinfoList.value = res.data;
  };

  //跳转校园漫步
  const gotoCampus = () => {
    uni.navigateTo({
      url: "../campus/campus",
    });
  };
  //跳转关于我们
  const gotoAbout = () => {
    uni.navigateTo({
      url: "../about/about",
    });
  };
  onMounted(() => {
    getUserInfoList();
  });
</script>

<style lang="scss">
  .contain {
    width: 750rpx;
    min-height: 100vh;
    background: url(https://life-1330552791.cos.ap-guangzhou.myqcloud.com/index/v2.jpg)
      no-repeat center / cover fixed;

    .head_navigation {
      width: 100%;
      padding-top: 20rpx;
      .head_title {
        width: 100%;
        margin: 100rpx 0 20rpx 50rpx;
        .avtar_title {
          display: flex;
          align-items: center;
          gap: 30rpx;
          .avtar {
            width: 100rpx;
            height: 100rpx;
            border-radius: 50%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          }
          .avtar_toptitle {
            font-size: 40rpx;
            font-weight: 700;
            letter-spacing: 10rpx;
          }
          .avtar_bottitle {
            font-size: 30rpx;
            font-weight: 400;
            letter-spacing: 3rpx;
          }
        }
      }
      .main_function {
        width: 100%;
        display: flex;
        margin: 50rpx 0;
        justify-content: center;
        align-items: center;
        gap: 40rpx;
        .left_join {
          position: relative;
          background: linear-gradient(135deg, #3494e6, #ec6ead);
          border-radius: 28rpx;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          height: 300rpx;
          width: 400rpx;
          overflow: hidden;
          transition: transform 0.3s ease, box-shadow 0.3s ease;

          &:active {
            transform: scale(0.98);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
          }

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
              rgba(255, 255, 255, 0.1),
              rgba(0, 0, 0, 0.2)
            );
            z-index: 1;
          }

          .leftjon_title {
            font-size: 100rpx;
            font-weight: 700;
            position: absolute;
            top: 10rpx;
            left: 40rpx;
            letter-spacing: 10rpx;
            color: #fff;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            z-index: 2;
          }

          .leftTop_arrowsvg {
            width: 170rpx;
            height: 100rpx;
            position: absolute;
            bottom: 20rpx;
            right: 45rpx;
            background: rgba(255, 255, 255, 0.2);
            padding: 10rpx;
            border-radius: 28rpx;
            z-index: 2;

            &::after {
              content: "→";
              font-size: 80rpx;
              color: #fff;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
            }
          }
        }
        .right_join {
          background: linear-gradient(135deg, #ff8008, #ffc837);
          border-radius: 28rpx;
          box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
          height: 300rpx;
          width: 200rpx;
          position: relative;
          overflow: hidden;
          transition: transform 0.3s ease, box-shadow 0.3s ease;

          &:active {
            transform: scale(0.98);
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
          }

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: linear-gradient(
              rgba(255, 255, 255, 0.1),
              rgba(0, 0, 0, 0.2)
            );
            z-index: 1;
          }

          .rightjon_title {
            font-size: 70rpx;
            font-weight: 700;
            position: absolute;
            color: #fff;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
            top: 50rpx;
            left: 30rpx;
            z-index: 2;
          }
        }
      }
    }
  }
</style>
